<template>
  <div class="tinymce-editor">
    <Editor ref="deitorRef" :key="timestamp" v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" />
  </div>
</template>
<script>
// 引入外部库和模块
import tinymce from 'tinymce/tinymce' // 引入 TinyMCE 主库
import Editor from '@tinymce/tinymce-vue' // 引入 TinyMCE 的 Vue 组件
// import { uploadFiles } from '@/api/common.js'; // 引入一个文件上传的 API
import 'tinymce/themes/silver/theme' // 引入 TinyMCE 的银色主题
import 'tinymce/plugins/lists' // 引入列表插件
import 'tinymce/plugins/advlist' // 引入高级列表插件
import 'tinymce/plugins/image' // 引入图片插件
import 'tinymce/plugins/imagetools' // 引入图片工具插件
import 'tinymce/plugins/table' // 引入表格插件
import 'tinymce/plugins/autolink' // 引入自动链接插件
import 'tinymce/plugins/preview' // 引入预览插件

// 定义 Vue 组件
export default {
  name: 'TinymceEditor',
  components: {
    Editor
  },

  // 接收父组件传递的属性
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    menubar: {
      type: String,
      default: 'file edit insert view format table'
    },
    plugins: {
      type: [String, Array],
      default:
        'lists advlist image imagetools table autolink preview'
    },
    toolbar: {
      type: [String, Array],
      default:
        'undo redo |  formatselect | fontsizeselect | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table preview'
    },
    height: {
      type: Number,
      default: 500
    }
  },

  // 组件的 data 函数，返回一个包含数据的对象
  data() {
    return {
      timestamp: 0,
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: this.height,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        // images_upload_handler: (blobInfo, success, failure) => {
        //   const formData = new FormData()
        //   formData.append('files', blobInfo.blob());
        //   uploadFiles(formData)
        //  .then(res => {
        //     success(res.url)
        //   })
        //  .catch(err => {
        //     failure(err)
        //   })
        // },
        resize: false
      },
      myValue: this.value
    }
  },

  // 组件的 watch 对象，包含数据的监听回调
  watch: {
    value: {
      handler(newValue) {
        this.myValue = newValue
      },
      immediate: true
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },

  // 组件的 methods 对象，包含可被调用的方法
  methods: {
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    clear() {
      this.myValue = ''
    },
    setTinymceContent() {
      setTimeout(() => {
        this.timestamp = new Date().getTime()
      }, 10)
    }
  }
}

</script>
